import { Link } from '@/src/navigation'

interface BreadcrumbItem {
  label: string
  path?: string
  active?: boolean
}

interface BreadcrumbProps {
  items: BreadcrumbItem[]
}

const Breadcrumb: React.FC<BreadcrumbProps> = (props) => {
  const { items } = props
  return (
    <div className='flex items-center'>
      {items.map((item, index) => {
        return (
          <div key={item.path} className='flex items-center'>
            {item.path ? (
              <Link
                href={item.path}
                className={`text-[0.75rem] leading-[0.75rem] 2xl:text-[1.125rem] 2xl:leading-[1.125rem] ${
                  item.active ? 'text-[#333333]' : 'text-[#999999]'
                }`}
              >
                {item.label}
              </Link>
            ) : (
              <div
                className={`text-[0.75rem] leading-[0.75rem] 2xl:text-[1.125rem] 2xl:leading-[1.125rem] ${
                  item.active ? 'text-[#333333]' : 'text-[#999999]'
                }`}
              >
                {item.label}
              </div>
            )}
            {index !== items.length - 1 && (
              <div className='mx-[0.75rem] text-[0.75rem] leading-[0.75rem] text-[#999999] 2xl:mx-[1.125rem] 2xl:text-[1.125rem] 2xl:leading-[1.125rem]'>
                &gt;
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}

export default Breadcrumb
